style: Fix panel and dash to account for mouse travel

- rework overview-icon styles for the dash so they extend to the edge of the screen once again
- revert changes to panel_button mixin
- rework panel_button mixin to be more flexible
- fixes #7318

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3112>

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 05fe154dcbf8b168f41b401d648857bdc1e083e4..951fec0811366fe8e5f81ffb27f412ec5c87ea24 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -68,6 +68,14 @@ stage {
 }
 
 /* Common Stylings */
+%reset {
+  background: none;
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+}
 
 // icon tiles
 %tile {

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index efb5f953f47b7dd6137b6e2d7012b34e6fd0212e..ae9c02ff8fa036034527090029dc6108965ebb05 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -55,6 +55,13 @@
   // font-size: round($size) + pt;
 }
 
+// Function to fill the background of a panel button
+@mixin panel_button_fill($bg) {
+  // use a box-shadow to fill the background
+  // this is done because panel buttons use a transparent border to fake padding
+  box-shadow: inset 0 0 0 100px $bg;
+}
+
 // Text entries drawing function
 @mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
   //
@@ -216,8 +223,8 @@
   @else if $type == 'checked' {
     color: $tc;
     background-color: $checked_button_bg_color;
-    &:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
-    &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));}
+    &:hover {background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));}
+    &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));}
   }
 
   // insensitive button
@@ -276,7 +283,6 @@
   // $system: uses system styles, true or false
   //
 
-
   @extend %tile;
 
   @if $raised {
@@ -336,100 +342,81 @@
 }
 
 // Panel menu/button drawing function
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") {
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") {
   //
-  // $bg: background color, derived from $panel_fg_color
-  // $fg: foreground color, also derived from $panel_fg_color
+  // $bg:                 background color, derived from $panel_fg_color
+  // $fg:                 foreground color, also derived from $panel_fg_color
+  // $style:              can be set to 'filled' if button uses a colored background
   //
-  // $flat:               if true, the button is filled instead of transparent
   // $highlighted_child:  if true, applies some special overrides for to a
   //                      child element, see _panel.scss for details
   // $child_class:        class name of the child element
   //
 
-  // common styles
   transition-duration: 150ms;
-  margin: 3px;
-  border: 1px solid transparent;
+  border: 3px solid transparent;
+  background-color: transparent;
   border-radius: $forced_circular_radius;
 
   font-weight: bold;
-  background-color: transparent;
-
   color: $fg;
 
-  @if $style == 'flat' {
-    box-shadow: none;
-
-    &:active, &:focus, &:checked {
-      background-color: transparentize($fg, 0.75);
-      &:hover {
-        background-color: transparentize($fg, 0.65);
-      }
-    }
-
-    &:hover {
-      background-color: transparentize($fg, 0.8);
-    }
-
-  } @else {
-    background-color: transparentize($bg, 0.2);
-
-    @if $contrast == 'high' {
-      border-color: $hc_inset_color;
-    }
+  // background fill defines
+  $fill:              transparent;
+  $hover_fill:        transparentize($fg, .83);
+  $active_fill:       transparentize($fg, .72);
+  $active_hover_fill: transparentize($fg, .68);
+
+  @if $style == 'filled' {
+    $fill:              $bg;
+    $hover_fill:        if($variant == 'light', darken($bg, 5%), lighten($bg, 5%));
+    $active_fill:       if($variant == 'light', darken($bg, 9%), lighten($bg, 9%));
+    $active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%));
+  }
 
-    &:active, &:focus, &:checked {
-      background-color: $bg;
-      &:hover {
-        background-color: transparentize($bg, 0.05);
-      }
-    }
+  @include panel_button_fill($fill);
 
-    &:hover {
-      background-color: transparentize($bg, 0.1);
-    }
+  &:focus, &:hover {
+    @include panel_button_fill($hover_fill);
   }
 
-   @if $contrast == 'high' {
-    &:hover, &:active, &:focus, &:checked {
-      border-color: $hc_inset_color;
+  &:active, &:checked  {
+    @include panel_button_fill($active_fill);
+
+    &:hover{
+      @include panel_button_fill($active_hover_fill);
     }
   }
 
   // some overrides to style a child element
   @if $highlighted_child {
+
+    // remove the common styles from the parent
     background: none !important;
+    box-shadow: none !important;
     border: none !important;
 
+    // add them to the child
     #{$child_class} {
       transition-duration: 150ms;
+      border: 3px solid transparent;
       border-radius: $forced_circular_radius;
+    }
 
-      // use box-shadow instead of border
-       @if $contrast == 'high' {
-        @include draw_hc_inset();
+    &:focus, &:hover {
+      #{$child_class} {
+        @include panel_button_fill($hover_fill);
       }
     }
 
-    &:active, &:focus {
-      background: none;
-      box-shadow: none !important;
-
+    &:active, &:checked {
       #{$child_class} {
-        background-color: transparentize($fg, 0.75);
+        @include panel_button_fill($active_fill);
 
         &:hover {
-          background-color: transparentize($fg, 0.65) !important;
+          @include panel_button_fill($active_hover_fill);
         }
       }
     }
-
-    &:hover {
-      box-shadow: none !important;
-      #{$child_class} {
-        background-color: transparentize($fg, 0.8);
-      }
-    }
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 255f3abefb5398386f85be71c455707334c9de76..6c6c8cd3e2992f160c8b12f06e4f4170044889a4 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -4,7 +4,7 @@
 $dash_background_color: $system_overlay_bg_color;
 
 $dash_placeholder_size: 32px;
-$dash_padding: $base_padding * 1.5;
+$dash_padding: $base_padding * 2;
 $dash_edge_offset: $base_margin * 3;
 $dash_border_radius: $modal_radius + $dash_padding;
 
@@ -16,10 +16,10 @@ $dash_border_radius: $modal_radius + $dash_padding;
   .dash-background {
     background-color: $dash_background_color;
     border-radius: $dash_border_radius;
-    padding-top: $dash_padding * 2;
-    padding-bottom: $dash_padding * 2;
-    padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values
-    padding-right: $dash_padding + 2px;
+    padding-top: $dash_padding;
+    padding-bottom: $dash_padding;
+    padding-left: $dash_padding - $base_margin; // subtract the margins added to .overview-tile below as padding
+    padding-right: $dash_padding - $base_margin;
 
     @if $contrast == 'high' {
       @include draw_hc_inset($width: 2px);
@@ -41,12 +41,33 @@ $dash_border_radius: $modal_radius + $dash_padding;
       height: $dash_placeholder_size;
     }
 
+    // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets
+    // as such the %tile style is overriden and button styles are applied to the child class .overview-icon
     .show-apps,
     .overview-tile {
-      @include tile_button($bg:$dash_background_color);
-      margin: $base_margin * 0.5;
-      padding: $base_padding;
-      border-radius: $base_border_radius * 2;}
+      // remove styles
+      @extend %reset;
+
+      padding: $dash_padding $base_margin;
+      padding-bottom: $dash_padding + $dash_edge_offset;
+
+      $fg:$system_fg_color;
+      $bg:$dash_background_color;
+
+      .overview-icon {
+        @extend %tile;
+        @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);
+
+        @if $contrast == 'high' {
+          @include draw_hc_inset();
+        }
+      }
+
+      &:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
+      &:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
+      &:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
+      &:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);}
+    }
   }
 
   // separator between pinned and running apps
@@ -64,8 +85,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
 
   // make sure all dash components have same margin from screen edge
   .dash-separator,
-  .dash-background,
-  .dash-item-container {
+  .dash-background {
     margin-bottom: $dash_edge_offset;
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index d854ed01d242e8422b0b816b1c0ef563c7091667..2a29eee9dad9706ed90b885672d3a6ab6afd268e 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -2,6 +2,7 @@
 // a.k.a. the panel
 
 $privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
+$recording_indicator_color: $red_4;
 
 $transparent_panel_fg_color: $light_1;    // always white for transparent lock screens
 $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview
@@ -18,7 +19,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
   // panel menus
   .panel-button {
-    @include panel_button($panel_fg_color);
+    @include panel_button();
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding;
 
@@ -72,11 +73,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     }
 
     &.screen-recording-indicator {
-      @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
+      @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
     }
 
     &.screen-sharing-indicator {
-      @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
+      @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
     }
 
     // clock
@@ -84,7 +85,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       // The clock display needs to have the background on .clock because
       // we want to exclude the do-not-disturb indicator from the background
       // see _drawing.scss for override details
-      @include panel_button($highlighted_child: true, $child_class:".clock");
+      @include panel_button($highlighted_child: true, $child_class: '.clock');
 
       .clock {
         // the highlighted child
@@ -101,16 +102,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &.unlock-screen,
   &.login-screen {
     background-color: transparent;
-    box-shadow: none;
 
     // unfortunate duplication to keep indicator style in these states
     .panel-button {
       &.screen-recording-indicator {
-        @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
+        @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled);
       }
 
       &.screen-sharing-indicator {
-        @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
+        @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled);
       }
     }
   }
@@ -119,11 +119,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &.unlock-screen,
   &.login-screen {
     .panel-button {
-      @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color);
+      @include panel_button($fg:$transparent_panel_fg_color);
 
       // clock
       &.clock-display {
-        @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock");
+        @include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
       }
     }
   }
@@ -131,7 +131,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   // use system text styles for overview panel
   &:overview {
     .panel-button {
-      @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color);
+      @include panel_button($fg:$system_panel_fg_color);
 
       &#panelActivities .workspace-dot {
         background-color: $system_panel_fg_color;
@@ -139,7 +139,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
 
       // clock
       &.clock-display {
-        @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock");
+        @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock');
       }
     }
   }